<template>
  <div class="bgcs">
    <van-nav-bar
      v-if="route.path == '/recommen'"
      title="评论详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div
      class="yaowenalls"
      v-for="item in commentdata.titlelist"
      :key="item.id"
      @click="jumpregister(item.username)"
    >
      <div>
        <img src="../assets/header.jpg" class="headersty" alt="" />
      </div>
      <div class="centerss">
        <div class="titles">{{ item.username }}</div>

        <div class="wanbaos">
          <span>{{ item.text }}</span>
        </div>

        <div class="badgesty">
          <van-badge :content="item.total"> </van-badge>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { onMounted, defineProps, toRefs, reactive } from "vue";
import { gettui, getuserinfo, getcommentinfo } from "../api/getlogin";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const store = useStore();
const list = defineProps({ title: String });
const commentdata = reactive({ commentlist: [], titlelist: [] });
let listgroup = reactive([]);
const getcommentinfos = async () => {
  const { data: res } = await getcommentinfo();
  commentdata.commentlist = res;

  // 创建一个对象来存储每个username对应的最后一条数据
  const usernameMap = {};

  // 遍历res，更新usernameMap
  res.forEach((item) => {
    usernameMap[item.username] = item;
  });

  // 将usernameMap的值赋给list
  const list = Object.values(usernameMap);

  // 如果需要将处理后的数据赋值给commentdata.commentlist，可以这样做
  // commentdata.commentlist = list;
  commentdata.titlelist = list;
  console.log(list);
};
const onClickLeft = () => history.back();
const jumpregister = (name) => {
  router.push({ path: "/registerdetails", query: { id: name } });
};
onMounted(async () => {
  console.log(route.path, "route");

  const { data: res } = await gettui();
  res.forEach((e) => {
    listgroup.push(e);
  });
  // getuserinfos();
  getcommentinfos();
});
</script>
 


<style scoped="less">
.titles {
  width: 10rem;
  font-size: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-align: left;
  margin-left: 1rem;
}

.yaowenalls {
  display: flex;
  /* justify-content: space-between; */
  width: 100%;
  border: 1px solid #eee;
  position: relative;
}

.shows {
  width: 10rem;
  height: 6rem;
}

.centerss {
  display: flex;
  flex-direction: column;
}

.wanbaos {
  color: #999;
  font-size: 1rem;
  display: flex;
  margin-top: 0.5rem;
  margin-left: 1rem;
}

.wanbaos span:nth-child(2) {
  margin-left: 2rem;
}

.sss {
  display: flex;
  flex-direction: row;
}

.fute {
  width: 100vw;
}

.new {
  text-align: left;
  margin-left: 0.5rem;
}
.headersty {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.badgesty {
  position: absolute;
  top: 23px;
  right: 23px;
}
</style>